<template>
  <div class="global-container">
    <div class="form-main">
      <el-form
        :model="formData"
        ref="form"
        label-width="100px"
        class="form"
        :disabled="disabled"
      >
        <el-form-item label="处理人">{{ formData.slPer }}</el-form-item>
        <el-form-item label="处理时间">
          {{ formData.slTime }}
        </el-form-item>
        <el-form-item
          label="处理结果"
          prop="acceptResult"
          :rules="$validate.required()"
        >
          <Aradio
            v-model="formData.acceptResult"
            :options="[
              { label: '受理', value: '3' },
              { label: '不予受理', value: '2' },
              { label: '一次性告知补正', value: '9' }
            ]"
          ></Aradio>
        </el-form-item>
        <el-form-item
          label="处理意见"
          prop="slAdvice"
          :rules="$validate.maxLength(true, 1,100)"
        >
          <el-input
            v-model="formData.slAdvice"
            type="textarea"
            placeholder="请输入处理意见"
          ></el-input>
        </el-form-item>
        <el-form-item v-if="formData.acceptResult==='9' && !disabled"
                      label="需补齐材料"
                      prop="stuffInfoList"
                      :rules="formData.acceptResult==='9' ? $validate.arrayRequired() : undefined">
          <MultiSelect
            v-model="formData.stuffInfoList"
            :options="attachOptions"
            placeholder="请选择需补齐材料"
            :disabled="disabled"
            :clearable="true"
            @change="$refs.form.validateField('stuffInfoList')"/>
        </el-form-item>
        <el-form-item label="附件" prop="slFile" :rules="formData.acceptResult==='9' ? $validate.required() : undefined">
          <BtnUpload
            v-model="formData.slFile"
            businessTable="TB_APPLY"
            :businessId="id"
            subType="accept"
            btn-text="上传文件"
            :disabled="disabled"
            @change="$refs.form.validateField('slFile')"
            @uploading="handleLoading"
          />
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import BtnUpload from '@/components/Upload/BtnUpload';
import Aradio from '@/components/Radio/Aradio';
import MultiSelect from "@/components/Select/MultiSelect";
export default {
  props: {
    disabled: {
      default: false,
      type: String || Boolean
    },
    id: {
      type: String
    },
    formData: {
      default: () => ({}),
    },
  },
  components: {
    MultiSelect,
    BtnUpload,
    Aradio,
  },
  computed: {
    attachments() {
      return this.$store.state.user.attachments;
    },
    attachOptions() {
      return this.attachments.map((item) => ({
        label: item.stuffName,
        value: item.stuffUniId,
      }));
    },
  },
  mounted(){},
  data() {
    return {};
  },
  methods: {
    // 校验表单
    checkValidate() {
      return this.$validate.checkValidate(this.$refs.form);
    },
    handleLoading(loading) {
      this.$emit('loading', loading);
    },
  },
};
</script>
<style lang="scss" scoped>
.global-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.form-main {
  width: 600px;
}
</style>
